<template>
  <div class="profile-user-container">
    <!-- 头像区域 -->
    <div class="avatar-section">
      <div class="avatar-wrapper">
        <UserAvatar :img="userInfo?.avatar" />
      </div>
      <div class="user-basic-info">
        <h3 class="user-name">{{ userInfo?.username }}</h3>
        <p class="user-title">{{ userInfo?.dept?.name }}</p>
      </div>
    </div>

    <!-- 信息列表 -->
    <div class="info-list">
      <div class="info-item">
        <div class="info-label">
          <div class="icon-wrapper user-icon">
            <Icon icon="ep:user" />
          </div>
          <span>{{ t('profile.user.username') }}</span>
        </div>
        <div class="info-value">{{ userInfo?.username }}</div>
      </div>

      <div class="info-item">
        <div class="info-label">
          <div class="icon-wrapper phone-icon">
            <Icon icon="ep:phone" />
          </div>
          <span>{{ t('profile.user.mobile') }}</span>
        </div>
        <div class="info-value">{{ userInfo?.mobile }}</div>
      </div>

      <div class="info-item">
        <div class="info-label">
          <div class="icon-wrapper email-icon">
            <Icon icon="fontisto:email" />
          </div>
          <span>{{ t('profile.user.email') }}</span>
        </div>
        <div class="info-value">{{ userInfo?.email }}</div>
      </div>

      <div class="info-item">
        <div class="info-label">
          <div class="icon-wrapper dept-icon">
            <Icon icon="carbon:tree-view-alt" />
          </div>
          <span>{{ t('profile.user.dept') }}</span>
        </div>
        <div v-if="userInfo?.dept" class="info-value">{{ userInfo?.dept.name }}</div>
      </div>

      <div class="info-item">
        <div class="info-label">
          <div class="icon-wrapper post-icon">
            <Icon icon="ep:suitcase" />
          </div>
          <span>{{ t('profile.user.posts') }}</span>
        </div>
        <div v-if="userInfo?.posts" class="info-value">
          <div class="tags-container">
            <span v-for="post in userInfo.posts" :key="post.id" class="tag post-tag">
              {{ post.name }}
            </span>
          </div>
        </div>
      </div>

      <div class="info-item">
        <div class="info-label">
          <div class="icon-wrapper role-icon">
            <Icon icon="icon-park-outline:peoples" />
          </div>
          <span>{{ t('profile.user.roles') }}</span>
        </div>
        <div v-if="userInfo?.roles" class="info-value">
          <div class="tags-container">
            <span v-for="role in userInfo.roles" :key="role.id" class="tag role-tag">
              {{ role.name }}
            </span>
          </div>
        </div>
      </div>

      <div class="info-item">
        <div class="info-label">
          <div class="icon-wrapper time-icon">
            <Icon icon="ep:calendar" />
          </div>
          <span>{{ t('profile.user.createTime') }}</span>
        </div>
        <div class="info-value">{{ formatDate(userInfo.createTime) }}</div>
      </div>

      <!-- 企业微信绑定 -->
      <div class="info-item binding-item">
        <div class="info-label">
          <div class="icon-wrapper wechat-icon">
            <el-image class="binding-icon" :src="QywxImg"></el-image>
          </div>
          <span>{{ t('企业微信') }}</span>
        </div>
        <div class="info-value">
          <div v-if="resQW != null" class="binding-status bound">
            <span class="status-badge success">已绑定</span>
            <span class="binding-id">{{ resQW.weUserId }}</span>
            <el-button type="danger" size="small" text @click="unbindWeCom" class="unbind-btn">
              解绑
            </el-button>
          </div>
          <div v-else class="binding-status unbound">
            <span class="status-badge warning">未绑定</span>
            <el-button type="primary" size="small" @click="bind(row)" class="bind-btn">
              绑定
            </el-button>
          </div>
        </div>
      </div>

      <!-- 公众号绑定 -->
      <div class="info-item binding-item">
        <div class="info-label">
          <div class="icon-wrapper official-icon">
            <el-image class="binding-icon" :src="GzhImg"></el-image>
          </div>
          <span>公众号</span>
        </div>
        <div class="info-value">
          <div v-if="socialUser" class="binding-status bound">
            <span class="status-badge success">已绑定</span>
            <el-button
              type="danger"
              size="small"
              text
              @click="unbindSocialUser(socialUser)"
              class="unbind-btn"
            >
              解绑
            </el-button>
          </div>
          <div v-else class="binding-status unbound">
            <span class="status-badge warning">未绑定</span>
            <el-button type="primary" size="small" @click="bindSocialUser" class="bind-btn">
              绑定
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 二维码预览 -->
  <el-image-viewer
    v-if="showPreview"
    :url-list="[qrcodeUrl]"
    :initial-index="0"
    @close="closeImg"
  />
</template>

<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
import UserAvatar from './UserAvatar.vue'
import { getUserProfile, ProfileVO, getBindUser, unbindUser } from '@/api/system/user/profile'
import {
  getAuthUrl,
  social_user,
  generateUserQrCode,
  socialUnbind
} from '@/api/system/user/socialUser'

import GzhImg from '@/assets/svgs/gzh.svg'
import QywxImg from '@/assets/svgs/qywx.svg'
import { ElImageViewer } from 'element-plus'

defineOptions({ name: 'ProfileUser' })

const showPreview = ref(false)
const qrcodeUrl = ref('')
const { t } = useI18n()
const userInfo = ref({} as ProfileVO)
const getUserInfo = async () => {
  const users = await getUserProfile()
  userInfo.value = users
}

// 获取企微绑定状态
const resQW = ref(null)
const getBindUserFn = async () => {
  resQW.value = await getBindUser()
}
// 解绑
const unbindWeCom = () => {
  ElMessageBox.confirm('确定要解绑已经绑定的企业微信吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const data = await unbindUser()
    if (data) {
      ElMessage.success('解绑成功!')
      await getUserInfo()
      await getBindUserFn()
    }
  })
}
// 绑定企微
const bind = async () => {
  const data = await getAuthUrl()
  window.open(data)
}
const socialUser = ref(null)
// 公众号
const getOfficialAccount = async () => {
  socialUser.value = await social_user()
}
// 生成绑定公众号的二维码
const bindSocialUser = async () => {
  const data = await generateUserQrCode()
  if (data) {
    qrcodeUrl.value = data
    showPreview.value = true
  }
}
// 解绑
const unbindSocialUser = async (row) => {
  const res = await socialUnbind(31, row.openid)
  if (res) {
    row.openid = undefined
  }
  ElMessage.success('解绑成功')
  getOfficialAccount()
}
const closeImg = () => {
  showPreview.value = false
  getOfficialAccount()
}
onMounted(async () => {
  await getUserInfo()
  await getBindUserFn()
  getOfficialAccount()
})
</script>

<style scoped>
.profile-user-container {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 82, 204, 0.08);
  transition: all 0.3s ease;
}

.profile-user-container:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 头像区域 */
.avatar-section {
  text-align: center;
  margin-bottom: 12px;
  position: relative;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}

.user-basic-info {
  .user-name {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
  }

  .user-title {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
  }
}

/* 信息列表 */
.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  border: 1px solid rgba(0, 82, 204, 0.06);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.info-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #0052cc 0%, #1d4ed8 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.info-item:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 82, 204, 0.15);
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
  transform: translateX(4px);
}

.info-item:hover::before {
  opacity: 1;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: #374151;
  min-width: 120px;
}

.icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
}

.user-icon {
  background: linear-gradient(135deg, #97a5e2 0%, #7db5db 100%);
  color: white;
}

.phone-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.email-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.dept-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

.post-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

.role-icon {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #666;
}

.time-icon {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #666;
}

.wechat-icon,
.official-icon {
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  border: 1px solid rgba(0, 82, 204, 0.1);
}

.binding-icon {
  width: 20px;
  height: 20px;
}

.info-value {
  color: #1f2937;
  font-weight: 500;
  text-align: right;
  flex: 1;
  word-break: break-all;
}

/* 标签容器 */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.tag {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  transition: all 0.2s ease;
}

.post-tag {
  background: linear-gradient(135deg, #ddd6fe 0%, #e0e7ff 100%);
  color: #5b21b6;
}

.role-tag {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.tag:hover {
  transform: scale(1.05);
}

/* 绑定状态 */
.binding-item {
  .info-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
}

.binding-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #065f46;
}

.status-badge.warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.binding-id {
  font-size: 12px;
  color: #6b7280;
  background: rgba(0, 82, 204, 0.1);
  padding: 2px 8px;
  border-radius: 8px;
}

.bind-btn,
.unbind-btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.bind-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
}

.bind-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 82, 204, 0.3);
}

.unbind-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-user-container {
    padding: 16px;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .info-label {
    min-width: auto;
  }

  .info-value {
    text-align: left;
  }

  .tags-container {
    justify-content: flex-start;
  }

  .binding-status {
    flex-wrap: wrap;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .profile-user-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: rgba(0, 82, 204, 0.2);
  }

  .info-item {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(0, 82, 204, 0.15);
  }

  .info-item:hover {
    background: rgba(30, 41, 59, 0.95);
  }

  .info-label,
  .info-value {
    color: #e5e7eb;
  }

  .user-basic-info .user-name {
    color: #f9fafb;
  }

  .user-basic-info .user-title {
    color: #9ca3af;
  }
}
</style>
